<template>
    <div>
        <h2>风险地区</h2>
        <div class="content">
            <template v-if="high.length>0">
                <div class="title high">高风险区{{high.length}}</div>
                <ul class="top">
                    <li v-for="(item,index) in high" :key="index">
                        {{item}}
                    </li>
                </ul>
            </template>
            <template v-if="mid.length>0">
                <div class="title mid">中风险区{{mid.length}}</div>
                <ul  class="top">
                    <li v-for="(item,index) in mid" :key="index">
                     {{item}}
                    </li>
                </ul>
                
            </template>
            
            
        </div>
    </div>
</template>

<script>
import api from "../../api/index";
    export default {
        data(){
            return {
                high:[],//高风险
                mid:[]  //低风险区
            }
        },

        created(){
            //请求风险地区接口
            api.getCovInfo()
            .then(res=>{
            console.log(res.data);
            console.log(res.data.newslist[0].riskarea);
            let riskarea=res.data.newslist[0].riskarea;
            //解析风险地区
            this.high=riskarea.high;
            this.mid=riskarea.mid;
            })
        }
   }
        
</script>

<style lang="less" scoped>
.title{
    font-size: 22px;
    color: #fff;
    margin-top: 15px;
    
}
.high{
        background-color: red;
    }
    .mid{
        background-color: rgba(240, 204, 43, 0.904);
    }
.top{
    font-size: 18px;
    li{
       background-color: #555;
       color: #fff;
       border-radius: 4px;
       margin-top: 0.2rem;
    }
}

</style>